messageList: Keep secondary actor when showing close button

Currently the secondary actor (if set) and the close button are
exclusive, that is the latter replaces the former on hover. As
the swapping feels rather busy and there's no real reason both
cannot be shown at the same time, keep the secondary actor always
visible.
A welcome side effect is that it no longer needs to be placed at
the end, so we can move the notification timestamp right next to
the corresponding title.

https://bugzilla.gnome.org/show_bug.cgi?id=775763

diff --git a/js/ui/calendar.js b/js/ui/calendar.js
index 68e560e97ffd9d5cf383d909928152126e632598..b34f0ef9c6e627dad2181fdaf5a7d2c219450d10 100644 (file)
--- a/js/ui/calendar.js
+++ b/js/ui/calendar.js
@@ -959,7 +959,7 @@ const NotificationSection = new Lang.Class({
     _createTimeLabel: function(datetime) {
         let label = Util.createTimeLabel(datetime);
         label.style_class = 'event-time',
-        label.x_align = Clutter.ActorAlign.END;
+        label.x_align = Clutter.ActorAlign.START;
         return label;
     },
 

diff --git a/js/ui/messageList.js b/js/ui/messageList.js
index 103878988fb0e3b1857ef47eadeaf3e8c160c614..66d911dc55788c080bc2ccd4eeaf070f5fa9d51a 100644 (file)
--- a/js/ui/messageList.js
+++ b/js/ui/messageList.js
@@ -331,18 +331,18 @@ const Message = new Lang.Class({
         let titleBox = new St.BoxLayout();
         contentBox.add_actor(titleBox);
 
-        this.titleLabel = new St.Label({ style_class: 'message-title',
-                                         x_expand: true,
-                                         x_align: Clutter.ActorAlign.START });
+        this.titleLabel = new St.Label({ style_class: 'message-title' });
         this.setTitle(title);
         titleBox.add_actor(this.titleLabel);
 
-        this._secondaryBin = new St.Bin({ style_class: 'message-secondary-bin' });
+        this._secondaryBin = new St.Bin({ style_class: 'message-secondary-bin',
+                                          x_expand: true, y_expand: true,
+                                          x_fill: true, y_fill: true });
         titleBox.add_actor(this._secondaryBin);
 
         let closeIcon = new St.Icon({ icon_name: 'window-close-symbolic',
                                       icon_size: 16 });
-        this._closeButton = new St.Button({ child: closeIcon, visible: false });
+        this._closeButton = new St.Button({ child: closeIcon, opacity: 0 });
         titleBox.add_actor(this._closeButton);
 
         this._bodyStack = new St.Widget({ x_expand: true });
@@ -493,9 +493,8 @@ const Message = new Lang.Class({
     },
 
     _sync: function() {
-        let hovered = this.actor.hover;
-        this._closeButton.visible = hovered && this.canClose();
-        this._secondaryBin.visible = !hovered;
+        let visible = this.actor.hover && this.canClose();
+        this._closeButton.opacity = visible ? 255 : 0;
     },
 
     _onClicked: function() {

diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js
index fe1b4d8e75f0246c5f9679f8d674e58c0e717f0d..32e3c4c766c7e85345c50f9e1b0377e1d15d91c2 100644 (file)
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -541,7 +541,8 @@ const NotificationBanner = new Lang.Class({
 
     _addSecondaryIcon: function() {
         if (this.notification.secondaryGIcon) {
-            let icon = new St.Icon({ gicon: this.notification.secondaryGIcon });
+            let icon = new St.Icon({ gicon: this.notification.secondaryGIcon,
+                                     x_align: Clutter.ActorAlign.END });
             this.setSecondaryActor(icon);
         }
     },